{% extends "base.html" %}

{% block title %}学生行为分析 - 智慧课堂分析系统{% endblock %}

{% block content %}
<h2>学生行为分析</h2>
<p>上传课堂视频文件，系统将自动分析学生行为特征</p>

<div class="upload-area">
    <form id="behaviorForm" enctype="multipart/form-data">
        <input type="file" id="videoUpload" name="video" accept="video/*" style="display: none;">
        <label for="videoUpload" class="file-label" style="cursor: pointer;">
            <h3>点击选择视频文件或拖拽到此区域</h3>
            <p>支持格式: MP4, AVI, MOV | 最大文件大小: 16MB</p>
        </label>
        <div style="margin-top: 1rem;">
            <button type="submit" class="btn">开始分析</button>
        </div>
    </form>
</div>

<div class="loading">
    <div class="spinner"></div>
    <p>正在分析学生行为... 这可能需要几分钟时间</p>
</div>

<div class="result-area" style="display: none;">
    <!-- 分析结果将在这里显示 -->
</div>

<script>
document.getElementById('behaviorForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    showLoading();
    
    fetch('{{ url_for("behavior.analyze_behavior") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        hideLoading();
        if (data.error) {
            showError(data.error);
        } else {
            showResult(`
                <h3>分析结果</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0;">
                    <div style="text-align: center; padding: 1rem; background: #f8f9fa; border-radius: 5px;">
                        <h4>注意力水平</h4>
                        <p style="font-size: 2rem; color: #667eea; margin: 0.5rem 0;">${data.attention_level}</p>
                    </div>
                    <div style="text-align: center; padding: 1rem; background: #f8f9fa; border-radius: 5px;">
                        <h4>参与度</h4>
                        <p style="font-size: 2rem; color: #667eea; margin: 0.5rem 0;">${data.participation}</p>
                    </div>
                    <div style="text-align: center; padding: 1rem; background: #f8f9fa; border-radius: 5px;">
                        <h4>行为趋势</h4>
                        <p style="font-size: 1.2rem; color: #28a745; margin: 0.5rem 0;">${data.behavior_trend}</p>
                    </div>
                </div>
                <div>
                    <h4>教学建议</h4>
                    <ul>
                        ${data.recommendations.map(rec => `<li>${rec}</li>`).join('')}
                    </ul>
                </div>
            `);
        }
    })
    .catch(error => {
        hideLoading();
        showError('分析过程中发生错误: ' + error.message);
    });
});
</script>
{% endblock %}